<template>
<div>
  <div class="login">
    <el-form v-model="ProductList" label-width="80px" class="login-box">
      <h3 class="login-title">商品添加</h3>
     
   

      <el-form-item label="书籍名称" prop="productName">
        <el-input type="text" placeholder="请输入添加书籍名" v-model="ProductList.productName" />
      </el-form-item>

    <el-form-item label="分类名" prop="catlogId" >
    <el-select v-model="ProductList.catlogId" placeholder="请选择分类书籍名">
     <el-option  v-for="item in CatlogList" :key="item.id" :label="item.catelogName"  :value="item.id" >
      <span style="float: left">{{item.catelogName}}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{item.catelogCode}}</span>
    </el-option>
  </el-select>
  </el-form-item> 

      <el-form-item label="价格" prop="price">
        <el-input type="passwd" placeholder="请输入书籍价格" v-model="ProductList.price" />
      </el-form-item>
      <el-form-item label="规格" prop="spec">
        <el-input type="text" placeholder="请输入书籍规格" v-model="ProductList.spec" />
      </el-form-item>

      <el-form-item label="库存" prop="stockQty">
        <el-input type="text" placeholder="请输入书籍库存" v-model="ProductList.stockQty" />
      </el-form-item>
       <el-form-item label="参考价格" prop="refPrice">
        <el-input type="text" placeholder="请输入书籍参考价" v-model="ProductList.refPrice" />
      </el-form-item>
    

      
      <el-form-item>
        <el-button type="primary" @click="productAdd()">添加</el-button>
        
        <router-link to="/admin/manageProduct"> <el-button type="primary" >返回</el-button></router-link>
      </el-form-item>
    </el-form>
</div>

</div>
  
</template>

<script>
export default {
  name:"ProductAdd",

  data() {
    return {
      updateId:'',
      ProductList:{
          catlogId:'',
          catlogName:'',
          productName:'',
          price:'',
          spec:'',
          stockQty:'',
          refPrice:'',
          imageUrl:'',
          shelfStatus:'',
          admin:''
      },
      CatlogList:{
          id:'',
          proId:'',
          catelogCode:'',
           catelogName:''

      }
      
    }
  },methods:{
    getCatlog:function(){
      this.$axios.get("/catlog/getcatlogs").then(
        res=>{
          this.CatlogList=res.data;
          console.log(this.CatlogList)
        }
      )
    },productAdd:function(){
      var admin=localStorage.getItem("admin")
      this.ProductList.admin=admin
      this.$axios.get("/product/add",{params:this.ProductList}).then(
        res=>{
          this.$router.push({
            path:'/admin/manageProduct'
          })
        }
      )

    }
  },
  mounted(){
    this.getCatlog();
  
  }
}
</script>

<style>
.login-box {
  border: 1px solid #DCDFE6;
  width: 600px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  position: absolute;
  top:-175px;
  left: 3px;
 
 
}

.login {
  max-width:600px;
  margin: 60px auto;
  background: #fff;
  padding: 20px 40px;
  border-radius: 10px;
  position: relative;
  z-index: 9;
 
}

/* 上传组件的样式 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>